<template>
    <div>
        
        <el-dialog :title="mydialog.title" :visible.sync="mydialog.flag">
            <el-form :model="addDialog" :rules="rolesRules" ref="addref">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input v-model="addDialog.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth" prop="roleDesc">
                    <el-input v-model="addDialog.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="mydialog.flag = false">取 消</el-button>
                <el-button type="primary" @click="que()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addRoles, editRoles } from "@/utils/axios/rolesApi"
export default {
    
    props: {
        mydialog: Object,
        addDialog: Object
    },

    data () {
        return {
            formLabelWidth: "120px",
            rolesRules: {
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                roleDesc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
            }
        };
    },

    mounted () {

    },

    methods: {
         que () {
            this.$refs.addref.validate(async(flag) => {
                if (flag) {
                    if (this.mydialog.type == "add") {
                        const { data } = await addRoles(this.addDialog)
                        // console.log(data);
                        if (data.meta.status == 201) {
                            this.mydialog.flag = false
                            this.$message.success(data.meta.msg)
                            this.$emit("suibian")
                        } else {
                            this.$message.error(data.meta.msg)
                        }
                    } else if (this.mydialog.type == "edit") {
                        const { data } = await editRoles(this.addDialog.id, this.addDialog)
                        // console.log(data);
                        if (data.meta.status == 200) {
                            this.mydialog.flag = false
                            this.$message.success("修改成功")
                            this.$emit("suibian")
                        } else {
                            this.$message.error(data.meta.msg)
                        }
                    }
                }
            })

        }
    },
};
</script>

<style lang="scss" scoped>

</style>